/**
 * 入参
 *
 */
import React, { PureComponent } from 'react';
import { IconC, CardC } from '@/src/components';
import { message } from 'antd';
import videoImg from '../../../assets/busi/systemManagement/systemVedio/video.png';
import downloadVideo from '../../../assets/busi/systemManagement/systemVedio/downloadVideo.png';
import { exportFile } from '../../../utils/commonFunc';
import { connect, routerRedux } from 'dva';
import style from './index.less';

class CardInfo extends PureComponent {
  state = {};

  componentDidMount() {
    const { itemData = {}, type } = this.props;
  }

  topHtml = () => {
    const { itemData = {} } = this.props;
    return (
      <div className={style.topHtml}>
        <div className={style.title} title={itemData.description}>
          {itemData.description}
        </div>
        <div>
          <IconC
            className={style.topIcon}
            isHover={false}
            type='edit'
            hoverAfter={true}
            style={{ marginRight: '12px' }}
            onClick={(e) => {
              this.props.editData(itemData);
            }}
          />
          <IconC
            className={style.topIcon}
            isHover={false}
            hoverAfter={true}
            type='delete'
            onClick={(e) => {
              this.props.deleteData(itemData);
            }}
          />
        </div>
      </div>
    );
  };

  // 跳转到对应页面
  goToPath = (path) => {
    if (path && path.includes('noStandard')) {
      path = '/noStandard';
    }
    if (path && path.includes('Barra')) {
      path = '/Barra';
    }
    if (path && path.includes('penetrate')) {
      path = '/penetrate';
    }
    this.props.dispatch(routerRedux.push(`${path}`));
  };

  vedioBtn = (type) => {
    const { itemData = {} } = this.props;
    if (itemData.fileList && itemData.fileList.length) {
      const id = itemData.fileList[0].value;
      if (type == '1') {
        const url = `${window.location.href.split('/#/')[0]}/#/videoPlayer?id=${id}`;
        window.open(url);
      } else {
        exportFile('gateway/file/maat-admin/file/download', { uniquekey: id });
      }
    } else {
      message.error('视频获取失败!');
    }
  };

  contentHtml = () => {
    const { itemData = {} } = this.props;
    return (
      <div>
        <div className={style.btnGroup}>
          <div className={style.imgBtn}>
            <div
              onClick={() => {
                this.vedioBtn('1');
              }}
            >
              <img src={videoImg}></img>
              播放视频
            </div>
          </div>
          <div
            className={style.imgBtn}
            onClick={() => {
              this.vedioBtn('2');
            }}
          >
            <div>
              <img src={downloadVideo}></img>
              下载视频
            </div>
          </div>
        </div>
        <div className={style.involvedPages}>
          <div style={{ float: 'left' }}> 涉及页面：</div>
          <div className={style.labelList}>
            {itemData.businessField &&
              JSON.parse(itemData.businessField).map((item, key) => {
                return (
                  <div key={key} className={style.label} onClick={() => this.goToPath(item.pageUrl)}>
                    {item.pageName}
                  </div>
                );
              })}
          </div>
        </div>
        <div className={style.launchDate}>
          <div> 上传时间：</div>
          <div className={style.time}> {itemData?.uploadTime.slice(0, 10)}</div>
        </div>
      </div>
    );
  };

  render() {
    const { itemData = {}, type } = this.props;
    return (
      <div className={style.CardInfo}>
        <CardC cardId={itemData.id} Top={this.topHtml()} Content={this.contentHtml()} width='100%' />
      </div>
    );
  }
}
export default connect(({ systemVedio }) => ({ systemVedio }))(CardInfo);
